<template>
  <div class="login-index">
    <div class="pic">
      <img src="https://media.wxcwy.com/mini/images/logo@2x.png" class="img-size-100" />
    </div>
    <div class="tips">请完成授权以继续使用</div>
    <button
      class="btn"
      type="primary"
      @tap="getUserProfile"
      lang="zh_CN"
    >
      <text>授权用户信息</text>
    </button>
    <!-- <a class="nav-btn" url="/pages/login/loginPhone">手机号验证登录</a> -->
  </div>
</template>

<script>
var cbUrl = "";
import { mapState, mapMutations } from "vuex";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["loginInfo"]),
  },
  onLoad(options) {
    cbUrl = options.cbUrl;
  },
  methods: {
    ...mapMutations(["changUserInfo"]),
    getUserProfile() {
      wx.getUserProfile({
        desc: '注册美时汇使用', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
            if (res.errMsg == "getUserProfile:ok") {
              wx.showLoading({
                title: "授权中...",
              });
              let { open_id, union_id } = this.loginInfo;
              let { encryptedData, iv } = res;
              this.$api
                .getWxUserInfo({
                  encryptedData,
                  iv,
                  union_id,
                  open_id,
                })
                .then((res) => {
                  if (res.code == 200) {
                    this.changUserInfo(res.data.user_info);
                    if (res.data.user_info.mobile) {
                      uni.redirectTo({
                        url: decodeURIComponent(cbUrl),
                      });
                      // uni.navigateBack({
                      //    delta: 1
                      // });
                    } else {
                      uni.redirectTo({
                        url: "/pages/login/loginIndex?cbUrl=" + cbUrl,
                      });
                    }
                  }
                });
            }
        }
      })
    },
  },
};
</script>

<style lang="scss">
.login-index {
  color: #666666;
  font-size: 32rpx;
  line-height: 45rpx;
  padding: 0 30rpx;
  overflow: hidden;
  .img-size-100 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .pic {
    width: 260rpx;
    height: 260rpx;
    margin: 120rpx auto;
    border-radius: 50%;
    overflow: hidden;
  }
  .tips {
    color: #2cacff;
    font-size: 26rpx;
    text-align: center;
    margin-top: 80rpx;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    margin: 20rpx auto;
    background: linear-gradient(270deg, rgb(39, 211, 4) 0%, #179b16 100%);
    border-radius: 8rpx;
    color: #fff;
  }
  .nav-btn {
    margin-top: 30rpx;
    text-align: center;
  }
}
</style>
